<template>
    <div>
        <div class="app-container">
            <TopInfo />
            <Search :lookup="data.lookup" @investigate="inves" />
            <div v-prmis="'code_solution_add'">
                <el-button type="primary" @click="add(1)">{{ $t('system.errCode.add') }}</el-button>
            </div>
        </div>
        <div class="app-container" v-loading="data.mtloading">
            <el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }" class="w-full">
                <el-table-column prop="s_id" label="ID" show-overflow-tooltip />
                <el-table-column prop="title" :label="$t('log.title')" show-overflow-tooltip />
                <el-table-column prop="error_code" :label="$t('system.errCode.code')" show-overflow-tooltip />
                <el-table-column prop="create_time" :label="$t('date.createTime')" show-overflow-tooltip>
                    <template #default="scope">
                        {{ getPlevel.gettime(scope.row.create_time, 3) }}
                    </template>
                </el-table-column>

                <el-table-column prop="creator_nickname" :label="$t('source.creater')" show-overflow-tooltip />
                <el-table-column prop="create_time" :label="$t('system.errCode.content')" show-overflow-tooltip>
                    <template #default="scope">
                        <el-icon :color="scope.row.content ? '#409eff' : ''" @click="onContent(scope.row)">
                            <Document />
                        </el-icon>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('public.operate')" width="220">
                    <template #default="scope">
                        <el-button v-prmis="'code_solution_update'" size="small" type="primary"
                            @click="add(2, scope.row)">{{ $t('public.modify') }}</el-button>
                        <el-button v-prmis="'code_solution_del'" size="small" type="danger"
                            @click="del(scope.row.s_id)">{{ $t('public.del') }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <PageNum :total="data.total" :page="data.errinfo" @exposeData="current" @fraction="fraction" />
        </div>
        <el-dialog v-model="data.dialogVisible" :title="data.title" center width="50%">
            <el-form v-if="data.dialogVisible" :model="data.errinfo" label-width="110px">
                <span :class="language=='en'? 'text-[red] absolute mt-2 ml-4':'text-[red] absolute mt-2 ml-8'">*</span>
                <el-form-item :label="$t('system.errCode.code') + ':'" prop="error_code">
                    <el-input v-model.number="data.addinfo.error_code" :placeholder="$t('message.pleaseEnter')" />
                </el-form-item>
                <el-form-item :label="$t('log.title') + ':'" prop="title">
                    <el-input v-model.number="data.addinfo.title" :placeholder="$t('message.pleaseEnter')" />
                </el-form-item>
                <el-form-item :label="$t('system.errCode.content') + ':'" prop="title">
                    <Editor v-model="data.addinfo.content" />
                </el-form-item>
                <div class="w-full text-center">
                    <div class="inline-block">
                        <el-button type="primary" @click="onSave()">{{ $t('public.save') }}</el-button>
                        <el-button @click="data.dialogVisible = false">{{ $t('public.cancel') }}</el-button>
                    </div>
                </div>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogContent" :title="$t('system.errCode.content')" center width="50%">
            <div v-html="data.content" class="border p-5">
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import getPlevel from '@/utils/level'
import { errorCodeList, errorCodedel, errorCodeadd, errorCodeupdate } from '@/api/system-err';
import Editor from '@/components/Editor/index.vue';
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
    language.value = locale.value
})
let dialogContent = ref(false)
let data = reactive({
    content: '',
    dialogVisible: false, // 弹窗
    mtloading: false, // 加载
    lookup: [ // 筛选栏
        { title: $t('system.errCode.code'), type: 'input', value: '', key: 'error_code' },
        { title: $t('log.title'), type: 'input', value: '', key: 'title' },
    ],
    title: '',
    errinfo: { // 筛选数据
        error_code: '',
        title: '',
        page: 1,
        pageNum: 15
    },
    addinfo: { // 筛选数据
        error_code: '',
        title: '',
        content: '',
        s_id: null
    },
    flag: 1,
    total: 0, // 总条数
})
let onContent = (row: any) => {
    if (row.content) {
        dialogContent.value = true
        data.content = row.content
    }
}
// 查询列表
let getlist = () => {
    data.mtloading = true
    errorCodeList(data.errinfo).then(res => {
        data.mtloading = false
        if (res.state == 200) {
            data.list = res.data.data
            data.total = res.data.total
        }
    })
}
let onSave = () => {
    if (!data.addinfo.error_code) {
        ElMessage({
            message: $t('message.errorunEmpty'),
            type: 'error'
        });
        return
    }
    if (data.flag == 1) {
        let pram = {
            error_code: data.addinfo.error_code,
            title: data.addinfo.title,
            content: data.addinfo.content
        }
        errorCodeadd(pram).then(res => {
            if (res.state == 200) {
                ElMessage({
                    message: $t('message.addSuccess'),
                    type: 'success'
                });
                data.dialogVisible = false
                getlist()
                return;
            }
            ElMessage({
                message: $t('message.networkFailed'),
                type: 'error'
            });
        })
    }
    if (data.flag == 2) {
        errorCodeupdate(data.addinfo).then(res => {
            if (res.state == 200) {
                ElMessage({
                    message: $t('message.modifySuccess'),
                    type: 'success'
                });
                data.dialogVisible = false
                getlist()
                return;
            }
            ElMessage({
                message: $t('message.networkFailed'),
                type: 'error'
            });
        })
    }

}
// 添加公众号
let add = (e, row) => {
    if (e == 1) {
        data.flag = 1
        data.addinfo.error_code = ''
        data.addinfo.title = ''
        data.addinfo.content = ''
        data.title = $t('system.errCode.add')
    }
    if (e == 2) {
        data.addinfo.s_id = row.s_id
        data.flag = 2
        data.title = $t('system.errCode.modify')
        data.addinfo.error_code = row.error_code
        data.addinfo.title = row.title
        data.addinfo.content = row.content
    }
    data.dialogVisible = true
}
// 查询回调
let inves = (e) => {
    for (let key in e) {
        data.errinfo[key] = e[key]
    }
    data.errinfo.page = 1
    data.errinfo.pageNum = 15
    getlist()
}
// 删除公众号
let del = (e) => {
    ElMessageBox.confirm($t('message.delData'))
        .then(res => {
            errorCodedel({ s_id: e }).then(res => {
                if (res.state == 200) {
                    ElMessage({
                        message: $t('message.delSuccess'),
                        type: 'success'
                    })
                    getlist()
                    return
                }
                ElMessage({
                    message: $t('message.networkFailed'),
                    type: 'error'
                })
            })

        }).catch(err => {
            console.log('取消')
        })
}

// 页数回调
let current = (e) => {
    data.errinfo.page = e
    getlist()
}

// 条数回调
let fraction = (e) => {
    data.errinfo.pageNum = e
    getlist()
}
getlist()
</script>